<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <!--tag-->
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll" id="categoryTab"></div>
        </div>
        <!--tag-->
        <!--mui-slider-group-->
        <div class="mui-slider-group" id="categoryBox"></div>
        <!--mui-slider-group-->
    </div>
</div>
<!--模板 start-->
<script type="text/html" id="categoryTabTemplate">
<% for(var i = 0; i < list.length; i++){ %>
<a class="mui-control-item {{ if i == 0 }}mui-active{{/if}}" href="#item{{ list[i]['id'] }}mobile">{{ list[i]['dry_name'] }}</a>
<% } %>
</script>

<script type="text/html" id="categoryBoxTemplate">
<% for(var i = 0; i < list.length; i++){ %>
<div id="item{{ list[i]['id'] }}mobile" class="mui-slider-item mui-control-content {{ if i == 0 }}mui-active{{/if}}">
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll" id="contentBox{{ list[i]['id'] }}" data-category-id="{{ list[i]['id'] }}">

        </div>
    </div>
</div>
<% } %>
</script>

<script type="text/html" id="contentBoxTemplate">
<% for(var i = 0; i < list.length; i++){ %>
<div class="mui-card">
    <div class="mui-card-header">{{ list[i]['dry_title'] }}</div>
    <div class="mui-card-content mui-card-media" style="height:40vw;background-image:url('{{ list[i]['dry_poster'] }}')"></div>
    <div class="mui-card-footer">
        <a class="mui-card-link">评论(5312)</a>
        <a class="mui-card-link">点赞(5685)</a>
        <a class="mui-card-link video-link" data="{{ list[i]['id'] }}">分享</a>
    </div>
</div>
<% } %>
</script>
<!--模板 end-->
<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
<script type="text/javascript" charset="utf-8" src="js/video.js"></script>
<script type="text/javascript" charset="utf-8" src="js/template-web.js"></script>
<script type="text/javascript" charset="utf-8">
var categoryTotal = 0;
var categoryLoaded = 0;

function pullUpRefreshCallback(that, index)
{
    var willDelete = that.element.querySelector(".mui-pull-bottom-tips");
    if(willDelete){
        willDelete.parentNode.removeChild(willDelete);
    }
    var id = that.element.getAttribute("data-category-id");
    requestUrl('GET', 'http://116.62.156.219:13000/api/video/getCategoryContent?id=' + id, function(data){
        addHtml(document.getElementById('contentBox' + id), 'beforeend', 'contentBoxTemplate', data.data, false);
    }, false);
    that.endPullUpToRefresh();
}

function pullDownRefreshCallback(that, index)
{
    var id = that.element.getAttribute("data-category-id");
    requestUrl('GET', 'http://116.62.156.219:13000/api/video/getCategoryContent?id=' + id, function(data){
        addHtml(document.getElementById('contentBox' + id), 'afterbegin', 'contentBoxTemplate', data.data, false);
    }, false);
    that.endPullDownToRefresh();
}

function useMui()
{
    mui.init();
    mui.ready(function(){
        mui('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true,
            deceleration: 0.0006
        });
        mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, element){
            mui(element).pullToRefresh({
                up: {callback: function(){pullUpRefreshCallback(this, index);}},
                down: {callback: function(){pullDownRefreshCallback(this, index);}}
            });
        });
    });
    mui.each(document.querySelectorAll('.video-link'), function(index, element){
        element.addEventListener('tap', function(){
            var videoId = this.getAttribute('data');
            var url = 'http://116.62.156.219:13000/html/video/show?id=' + videoId;
            mui.openWindow({url: url, id: 'videoId' + videoId});
        });
    });
}

requestUrl('GET', 'http://116.62.156.219:13000/api/videocategory/getList', function(data){
    addHtml(document.getElementById('categoryTab'), 'beforeend', 'categoryTabTemplate', data.data, doCategoryBox);
}, false);
</script>
<script type="text/javascript" charset="utf-8" src="js/vconsole.min.js"></script>
<script type="text/javascript" charset="utf-8">
var vConsole = new VConsole();
</script>
</body>
</html>
